<template>
  <div>
    <el-autocomplete
      class="inline-input"
      v-model="accidentAddress"
      value-key="name"
      :fetch-suggestions="querySearch"
      placeholder="请输入内容"
      @select="handleSelect"
      @change="updateAccidentAddress"
      clearable>
    </el-autocomplete>
    <div class="map-container" ref="mapContainer"></div>
  </div>

</template>

<script>
  import MapUtil from "@/util/MapUtil";
  export default {
    data() {
      return {
        accidentAddress: ""
      }
    },
    mounted() {
      let _mapContainer = this.$refs.mapContainer;
      MapUtil.initMap(_mapContainer, "118.79647", "32.05838");
    },
    methods: {
      updateAccidentAddress(e) {
        console.log("---->", e);
        this.accidentAddress = e;
      },
      querySearch(queryString, cb) {
        let that = this;
        MapUtil.mapSearch(queryString).then(function (response) {
          let results = queryString ? response.filter(that.createFilter(queryString)) : response;
          cb(results);
        });
      },
      createFilter(queryString) {
        return (restaurant) => {
          return (restaurant.name.toLowerCase().indexOf(queryString.toLowerCase()) === 0);
        };
      },
      handleSelect(item) {
        MapUtil.markerMoveTo(item.location.lng, item.location.lat);
        this.accidentAddress = item.name;
      }
    }
  };
</script>

<style scoped lang="scss">
.map-container {
  height: 500px;
}
</style>
